<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>产品列表</title>
	<!--引入Elementui组件-->
	<!-- 引入样式
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/theme-chalk/index.min.css">
    -->
	<!-- 引入组件库
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.min.js"></script>
    -->

	<link rel="stylesheet" href="layui/css/layui.css"/>
	<script type="text/javascript" src="layui/layui.js"></script>
	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
	<link rel="stylesheet" href="css/index.css"/>
	<style>
		/*二级导航*/
		.my-list-ejdh {
			border: 1px solid #E5E5E5;
			height: 40px;
			top: 20px;
		}

		/*二级导航下的分类*/
		.my-list-ejdh-a {
			display: block;
			float: left;
			width: 80px;
			height: 25px;
			text-align: center;
			line-height: 25px;
			margin: 5px 5px;
		}

		.my-list-ejdh a:hover {
			color: #FF4400;
		}

		/*排序*/
		.my-list-paixu {
			border: 1px solid #E5E5E5;
			height: 50px;
			background-color: #fff;
			margin-top: 30px;
		}

		.my-list-paixu-a {
			display: block;
			width: 100px;
			height: 50px;
			text-align: center;
			line-height: 50px;
			font-size: 14px;
			float: left;
		}

		.my-list-paixu-a:hover {
			background-color: #FF4400;
			color: #fff;
		}

		/*表示当前分类被选中*/
		.catalogList-active {
			color: #FF4400;
		}
	</style>
	<script>
		$(function () {
			//纵向导航列表的二级导航的显示和隐藏
			$(".my-daohang2 li").mouseenter(function () {
				$(".my-daohang2-2").show();
			});
			$(".my-daohang2 li").mouseleave(function () {
				$(".my-daohang2-2").hide();
			});
			$(".my-daohang2-2").mouseenter(function () {
				$(this).show();
			});
			$(".my-daohang2-2").mouseleave(function () {
				$(this).hide();
			});

			//轮播下方促销图片的悬停事件
			$(".my-cximg").mouseenter(function () {
				$(this).css({"border-color": "#FF5722"});
			});
			$(".my-cximg").mouseleave(function () {
				$(this).css({"border-color": "#FFF"});
			});

			//回到顶部按钮
			$("#my-backtop").click(function () {
				$("html,body").animate({
					scrollTop: 0
				}, 500);
			});

			//鼠标滚动事件，显式回到顶部按钮
		});
	</script>
</head>


<body>

<!-- 引入头部 -->
<div>
	<iframe src="header.html" scrolling="no" style="height:180px;width: 100%;border: 0px;"></iframe>
</div>
<!--引入头部end-->

<div class="my-index-body">
	<!--横向导航栏-->
	<div class="my-daohang1">
		<div class="layui-container">
			<div class="layui-row">
				<!--菜单-->
				<div class="layui-col-md9" style="height: 50px;">
					<a href="">首页</a>
					<a href="">优抢购</a>
					<a href="">聚划算</a>
					<a href="">大转盘</a>
					<a href="">会员折扣</a>
					<a href="">买家秀</a>
				</div>
			</div>
		</div>
	</div>
	<!--横向导航end-->


	<!--促销活动部分-->
	<div class="my-cuxiaodiv">

	</div>
	<!--促销活动部分end-->

	<!-- 二级导航部分 -->
	<div class="my-list-ejdh layui-container">
		<p id="catalogList">
			<strong class="my-list-ejdh-a">分类：</strong>
		</p>
	</div>
	<!--排序-->
	<div class="my-list-paixu layui-container">
		<a href="" class="my-list-paixu-a">按销量</a>
		<a href="" class="my-list-paixu-a">按评分</a>
		<a href="" class="my-list-paixu-a">价格升序</a>
		<a href="" class="my-list-paixu-a">价格降序</a>
	</div>
	<!--二级导航部分end-->

	<!--商品展示部分-->
	<div class="layui-container my-goods" style="border-radius: 0px;top: 10px;">
		<!--商品列表-->
		<div class="my-goods-list layui-row" id="my-goods-list-pager">
			<!--以下是商品详情div-->
		</div>
	</div>
	<!--商品展示部分end-->

	<!-- 分页 -->
	<div class="my-pagebrake" style="height: 80px;text-align: center;">
		<div id="test1"></div>
	</div>
	<!-- 分页end -->

	<!--引入底部-->
	<div class="my-footer">
		<iframe src="footer.html" scrolling="no" style="border: 0px;width: 100%;height: 291px;"></iframe>
	</div>
	<!--引入底部end-->
	<!--回到顶部按钮-->
	<div id="my-backtop">
		<span class="layui-icon layui-icon-up"></span>
	</div>

</div>

</body>
<script>

	let catalogList = [];
	let itemsList = []; //当前分类的商品集合
	//let laypage;


	window.onload = initCurrentItemsList();

	function initCurrentItemsList() {
		//尝试从本地缓存中取出保存的商品分类集合。
		if (localStorage.getItem("catalogList") != null) {
			catalogList = JSON.parse(localStorage.getItem("catalogList"));
			console.log("-----商品分类集合是-------");
			console.log(catalogList);
			changeCatalog('-1', 'all');
		}
	}

	function changeCatalog(index, catalogName) {
		console.log('改变当前分类,当前下标是：' + index + ",分类名字：" + catalogName);
		$("#catalogList").empty(); //清空节点
		let html = "";
		if (index == '-1') {
			html = "<strong class=\"my-list-ejdh-a\">分类：</strong>" +
					"<a href=\"javascript:void(0);\" class=\"my-list-ejdh-a catalogList-active\" onclick=\"changeCatalog('-1','all');\">" + '全部' + "</a>";
		} else {
			html = "<strong class=\"my-list-ejdh-a\">分类：</strong>" +
					"<a href=\"javascript:void(0);\" class=\"my-list-ejdh-a \" onclick=\"changeCatalog('-1','all');\">" + '全部' + "</a>";
		}
		for (let i = 0; i < catalogList.length; i++) {
			if (index == i) {
				html += "<a href=\"javascript:void(0);\" class=\"my-list-ejdh-a catalogList-active\" onclick=\"changeCatalog('" + i + "','" + catalogList[i].catalog + "')\">" + catalogList[i].catalog + "</a>";
			} else {
				html += "<a href=\"javascript:void(0);\" class=\"my-list-ejdh-a \" onclick=\"changeCatalog('" + i + "','" + catalogList[i].catalog + "')\">" + catalogList[i].catalog + "</a>";
			}
		}
		$("#catalogList").append(html);

		//发送异步请求获取当前的商品集合
		$.ajax({
			url: "https://localhost:8443/servletdemo/items/catalog?catalogName=" + catalogName,
			type: "GET",
			dataType: "text",
			success: function (resp) {
				let result = JSON.parse(resp);
				if (result.code === 200) {
					console.log('获取商品集合信息成功！');
					//console.log(result.data);
					itemsList = result.data;
					console.log(itemsList);
					layui.use(['element', 'carousel', 'laypage'], function () {
						var element = layui.element;
						var carousel = layui.carousel;
						laypage = layui.laypage;

						//建造分页实例
						laypage.render({
							elem: 'test1'
							, theme: '#FF5722'
							, width: '100%' //设置容器宽度
							, arrow: 'always' //始终显示箭头
							, count: itemsList.length
							, curr: 1  //当前的分页
							, limit: 8 //每一页显示8条记录
							//点击分页按钮要执行的语句
							, jump: function (obj) {
								//模拟渲染
								document.getElementById('my-goods-list-pager').innerHTML = function () {
									var arr = []
											, thisData = itemsList.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
									layui.each(thisData, function (index, item) {
										arr.push('<div class="goods-mess layui-col-md3">\n' +
												'\t\t\t\t\t\t<!--产品图片-->\n' +
												'\t\t\t\t\t\t<div class="goods-img">\n' +
												'\t\t\t\t\t\t\t<a href="goodsMess.html?id='+item.id+'">\n' +
												'\t\t\t\t\t\t\t\t<img src="' + item.pic + '" />\n' +
												'\t\t\t\t\t\t\t</a>\n' +
												'\t\t\t\t\t\t</div>\n' +
												'\t\t\t\t\t\t<!--产品价格-->\n' +
												'\t\t\t\t\t\t<p class="goods-price">￥' + item.price + '</p>\n' +
												'\t\t\t\t\t\t<!--产品销量-->\n' +
												'\t\t\t\t\t\t<p class="goods-sellnum">月销：1000笔</p>\n' +
												'\t\t\t\t\t\t<!--产品标题-->\n' +
												'\t\t\t\t\t\t<p class="goods-biaoti">\n' +
												'\t\t\t\t\t\t\t<a href="goodsMess.html">\n' +
												'\t\t\t\t\t\t\t\t' + item.name + '\n' +
												'\t\t\t\t\t\t\t</a>\n' +
												'\t\t\t\t\t\t</p>\n' +
												'\t\t\t\t\t</div>');
									});
									return arr.join('');
								}();
							}
						});
					});
				}
			}
		});
	}
</script>
</html>
